<template>
  <div style="height: 100%;overflow: hidden">
    <Title text="温湿度监控" style="position: sticky;top: 0"/>
    <div class="tempContext">
      <tempContainer title="量产线">
        <SingleState v-for="item in datalist1" :key="item.id" :data="item"/>
      </tempContainer>
      <tempContainer title="280中试线">
        <SingleState v-for="item in datalist2" :key="item.id" :data="item"/>
      </tempContainer>
      <tempContainer title="60中试线">
        <SingleState v-for="item in datalist3" :key="item.id" :data="item"/>
      </tempContainer>

      <div style="height:20px;margin-bottom: 20px">

      </div>
    </div>

  </div>
</template>

<script setup>
import Title from '../components/Title.vue'
import SingleState from '../components/SingleState.vue';
import {ref, onMounted, computed} from 'vue';
import {tempList, lcx, zs280, zs60, temperatureAndHumidity} from '../assets/mock.js';
import tempContainer from '../../src/components/tempContainer.vue'


// const datalist1 = ref([])

const datalist1 = computed(() => {
  return tempList.filter((item) => {
    return lcx.includes(item.id)
  }).sort((a, b) => a.index_no - b.index_no)
  //     .reduce((o, c) => {
  //   return o.concat({...c, index_no: lcx.indexOf(c.id)})
  // }, [])
})

const datalist2 = computed(() => {
  // temperatureAndHumidity
  return tempList.filter((item) => {
    return zs280.includes(item.id)
  }).sort((a, b) => a.index_no - b.index_no)
  //     .reduce((o, c) => {
  //   return o.concat({...c, index_no: zs280.indexOf(c.id)})
  // }, []).sort((a, b) => a.index_no - b.index_no)
})

const datalist3 = computed(() => {
  // temperatureAndHumidity
  return tempList.filter((item) => {
    return zs60.includes(item.id)
  }).sort((a, b) => a.index_no - b.index_no)
  //     .reduce((o, c) => {
  //   return o.concat({...c, index_no: zs60.indexOf(c.id)})
  // }, []).sort((a, b) => a.index_no - b.index_no)
})

// console.log('datalist1', datalist1)
// onMounted(() => {
//   datalist1.value = temperatureAndHumidity
// })

</script>

<style scoped>
.tempContext {
  height: 100%;
  width: 100%;
  /* //background: #00C1DE; */
  overflow-y: auto;
}

.date {
  height: 50px;
  line-height: 50px;
  text-shadow: 1px 1px 3px rgb(216, 216, 216);
  color: rgb(193, 198, 205);
  font-size: 22px;
  position: absolute;
  right: 10px;
}

.main {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.main::-webkit-scrollbar {
  width: 10px;
}

.main::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0);
}

.main:hover::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgb(144, 144, 144);
}

* {
  color: white;
}
</style>